<template>
  <cloudPage>
    <cloudHeader slot="gHeader">
      <view class="grace-header-body" style="background:#fff;">
        <!-- 返回按钮 -->
        <view
          class="grace-header-icons grace-icons icon-arrow-left"
          style="color:#000;"
          @tap.stop="handleNavBack"
        ></view>
        <!-- 中间内容 -->
        <view
          class="grace-header-content-noflex grace-text-center font-32"
          style="color:#000;"
        >
          {{ $t("otc.order.index.title") }}
        </view>
        <!-- 右侧按钮 -->
        <view class="icons grace-icons"></view>
      </view>
    </cloudHeader>
    <view class="gbody main">
      <!-- 列表 -->
      <view class="coin-section m-t">
        <mescroll-body
          ref="mescrollRef"
          @init="mescrollInit"
          @down="downCallback"
          @up="upCallback"
          :down="downOption"
          :up="upOption"
        >
          <view
            class="block little-line"
            @tap.stop="navTo(item)"
            v-for="item in trade.data"
            :key="item.id"
          >
            <view class="s-row">
              <view class="col">
                <text
                  class="coin"
                  :class="{
                    buy: item.buyer_id == user.id,
                    sell: item.seller_id == user.id
                  }"
                  >{{
                    item.seller_id == user.id
                      ? $t("otc.index.sell")
                      : $t("otc.index.buy")
                  }}</text
                >
                <text class="coin">{{ item.coin }}</text>
              </view>
              <view class="col r light">
                <text class="status">
                  {{ getTradeStatusText(item.status) }}
                </text>
                <cloudIcon
                  type="grace"
                  name="icon-arrow-right"
                  style="font-size:32rpx;"
                ></cloudIcon>
              </view>
            </view>
            <view class="s-row">
              <view class="col subtitle row-title">
                {{ $t("otc.order.index.time") }}
              </view>
              <view class="col subtitle row-title"
                >{{ $t("otc.index.count") }}({{ item.coin }})</view
              >
              <view class="col r subtitle row-title"
                >{{ $t("otc.order.index.total_transaction") }}(CNY)</view
              >
            </view>
            <view class="s-row">
              <view class="col subtitle row-amount">
                {{ item.created_at | moment("MM-DD HH:mm") }}
              </view>
              <view class="col subtitle row-amount">
                {{ parseFloat(item.num) }}
              </view>
              <view class="col r subtitle row-amount">
                {{ item.num | ceil(item.price) }}
              </view>
            </view>
          </view>
        </mescroll-body>
      </view>
    </view>
  </cloudPage>
</template>

<script>
import { mapGetters, mapActions, mapState } from "vuex";
import { getTradeStatusText } from "@/utils/otc";
import { ceil, multiply } from "lodash-es";
export default {
  data() {
    return {
      downOption: {},
      upOption: {
        page: {
          num: 0, // 当前页码,默认0,回调之前会加1,即callback(page)会从1开始
          size: 10 // 每页数据的数量
        },
        empty: {
          tip: "~ 空空如也 ~"
        }
      },
      page: {
        page: 1, // 页码
        limit: 10 // 页数
      }
    };
  },
  async onLoad() {
    if (!this.user) await this.loadUser();
  },
  computed: {
    ...mapGetters("otc", ["trade"]),
    ...mapState("user", ["user"])
  },
  filters: {
    ceil(arg1, arg2) {
      var m = 0;
      var s1 = arg1.toString();
      var s2 = arg2.toString();
      try {
        m += s1.split(".")[1].length;
      } catch (e) {}
      try {
        m += s2.split(".")[1].length;
      } catch (e) {}
      let allprice =
        (Number(s1.replace(".", "")) * Number(s2.replace(".", ""))) /
        Math.pow(10, m);
      return ceil(allprice, 2);
    }
  },
  methods: {
    ...mapActions("otc", ["loadTrade"]),
    ...mapActions("user", ["loadUser"]),
    getTradeStatusText(status) {
      return getTradeStatusText(status, this);
    },
    navTo(item) {
      this.handleNavTo({ url: "/pages/otc/order/detail?id=" + item.id });
    },
    /*下拉刷新的回调 */
    downCallback() {
      // 下拉刷新的回调,默认重置上拉加载列表为第一页 (自动执行 page.num=1, 再触发upCallback方法 )
      this.mescroll.resetUpScroll();
    },
    /*上拉加载的回调: 其中page.num:当前页 从1开始, page.size:每页数据条数,默认10 */
    upCallback(page) {
      let $this = this;
      this.page.page = page.num;
      this.page.limit = page.size;
      this.loadTrade({
        page: this.page.page,
        limit: this.page.limit
      })
        .then(res => {
          $this.mescroll.endByPage(res.data.length, res.last_page);
        })
        .catch(error => {
          $this.mescroll.endErr();
        });
    }
  }
};
</script>

<style scoped>
.main {
  background: #fff;
}
.little-line {
  position: relative;
}
.little-line:after {
  content: " ";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background-color: #dcdfe6;
  transform: scaleY(0.5);
}
.coin-section {
  background: #fff;
}
.block {
  padding: 20rpx 0;
}
.block .s-row {
  display: flex;
  align-items: center;
  padding: 10rpx 30rpx 0rpx 30rpx;
}
.s-row .subtitle {
  padding: 4rpx 0 10rpx 0;
}
.s-row .col {
  font-size: 28rpx;
  color: #14191f;
  flex: 1;
}
.s-row .col .coin {
  font-weight: bold;
  padding-right: 10rpx;
}
.s-row .col .buy {
  color: #0952c3;
}
.s-row .col .sell {
  color: red;
}
.s-row .col .status {
  font-size: 28rpx;
  font-weight: 10;
}
.s-row .coinLogo {
  width: 36rpx;
  height: 36rpx;
  margin-right: 8px;
  display: inline-block;
  vertical-align: middle;
}
.s-row .light {
  font-weight: bold;
  font-size: 34rpx;
  color: #14191f;
}
.s-row .r {
  text-align: right;
}
.s-row .row-title {
  font-size: 28rpx;
  font-weight: normal;
  color: #8b9faa;
}
.s-row .row-amount {
  font-size: 28rpx;
  font-weight: normal;
  color: #14191f;
}
.s-row .gt {
  font-weight: 10;
}
</style>
